<script setup lang="ts">
import { QForm, QInput, QIcon, QTooltip } from "quasar";

const vueProps = defineProps<{
  modelValue: string;
  label: string;
  accentColor?: string;
}>();
</script>

<template>
  <q-form @submit="$emit('search')">
    <q-input dense clearable borderless class="-ml-0.5" :placeholder="vueProps.label" :input-class="{
      'text-base': true,
      'text-secondary': vueProps.modelValue === '',
      [vueProps.accentColor || 'text-accent']: vueProps.modelValue !== '',
    }" :model-value="vueProps.modelValue" @update:model-value="(e: any) => $emit('update:model-value', e)"
      @clear="$emit('update:model-value', '')" @blur="$emit('search')">
      <template v-slot:append v-if="vueProps.modelValue === ''">
        <q-icon name="manage_search" class="-mt-0.5 text-primary relative">
          <q-tooltip class="text-lg">回车，或点击空白区域开始搜索</q-tooltip>
        </q-icon>
      </template>
    </q-input>
  </q-form>
</template>
